<template>
  <div class="shareholder-info-container">
    <EmptyIndex :isEmpty="vantListGather.list.length">
      <template #listCon>
        <van-list
          v-model="vantListGather.loading"
          :finished="vantListGather.finished"
          :finished-text="vantListGather.finishedText"
          :offset="vantListGather.offset"
          @load="onLoad"
        >
          <ul class="gs-details">
            <li
              v-for="(item, index) in getShareholderData"
              :key="index"
              @click.prevent="handleEnterpriseInfoQuery(item.name, item.id)"
            >
              <div class="left-info">
                <div class="left-info-t">
                  <div class="order-number">{{ index + 1 }}</div>
                  <div class="left-info-t-gs">
                    <h3>{{ item.name }}</h3>
                    <p>
                      <span>出资比例：{{ item.percent | nullFiltering }}</span>
                      <span>出资日期：{{ item.time | nullFiltering }}</span>
                    </p>
                    <p>
                      <span>出资金额：{{ item.amomon | nullFiltering }}</span>
                      <span>出资类型：{{ item.type | nullFiltering }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="right-icon">
                <em class="iconfont icon-youjiantou" />
              </div>
            </li>
          </ul>
        </van-list>
      </template>
    </EmptyIndex>
  </div>
</template>

<script>
import EmptyIndex from "@/components/empty";
import onLoadMixin from "@/mixin/onLoadMixin";
import { jumpPage } from "@/utils";

export default {
  name: "ShareholderInfo",
  components: {
    EmptyIndex,
  },
  mixins: [onLoadMixin],
  data() {
    return {
      pageNum: 1,
    };
  },
  computed: {
    /**
     * 获取股东信息
     */
    getShareholderData() {
      //进行数据重构
      return this.vantListGather.list.flatMap((data) => {
        const capitalArray = data.capital?.map((item) => {
          return { ...item, name: data.name, type: "认缴" };
        });
        const capitalActlArray = data.capitalActl?.map((item) => {
          return { ...item, name: data.name, type: "实缴" };
        });
        return capitalArray?.concat(capitalActlArray);
      });
    },
  },
  methods: {
    /**
     * 进入企业详情信息页面
     * @param {*} companyName 公司名称
     * @param {*} id
     */
    handleEnterpriseInfoQuery(companyName, id) {
      sessionStorage.setItem("isGoBack", false);
      jumpPage(this, "EnterpriseInfoQuery", { companyName, id }, true);
    },
  },
  filters: {
    //值为空返回 “--”
    nullFiltering(value) {
      return value === "" ? "--" : value;
    },
  },
};
</script>
